<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单列表</title>
    <link rel="stylesheet" type="text/css" href="/static/css/elementui-ui-font.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/elementui.css"/>
    <script src="/static/js/Vue-2.6.12.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/axios.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/elementui.js" type="text/javascript" charset="utf-8"></script>
    <style>
        .el-row {
            margin-bottom: 20px;
            &:last-child {
                 margin-bottom: 0;
             }
        }
        .el-col {
            border-radius: 4px;
        }
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }
        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>
</head>
<body>
<div id="app">
    <el-row :gutter="24">
    </el-row>
    <el-row>
        <el-col :span="2"><div class="grid-content "></div></el-col>
        <el-col :span="20">
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                <el-form-item label="订单号">
                    <el-input v-model="searchForm.id" placeholder="订单号"></el-input>
                </el-form-item>
                <el-form-item label="收货人">
                    <el-input v-model="searchForm.username" placeholder="收货人"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="findList">查询</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="2"><div class="grid-content "></div></el-col>
    </el-row>

    <el-row>
        <el-col :span="2"><div class="grid-content "></div></el-col>
        <el-col :span="20">
            <el-table
                    :data="orderList"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="订单编号"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="订单创建时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="用户名">
                </el-table-column>
                <el-table-column
                        label="订单金额">
                    <template slot-scope="scope">
                        {{ scope.row.totalMoney / 100}} 元
                    </template>
                </el-table-column>
                <!--<el-table-column
                        label="优惠金额">
                    <template slot-scope="scope">
                        {{ scope.row.preMoney / 100}} 元
                    </template>
                </el-table-column>
                <el-table-column
                        label="邮费">
                    <template slot-scope="scope">
                        {{ scope.row.postFee / 100}} 元
                    </template>
                </el-table-column>-->
                <el-table-column
                        label="实付金额">
                    <template slot-scope="scope">
                        {{ scope.row.payMoney / 100}} 元
                    </template>
                </el-table-column>
                <el-table-column
                        label="订单状态">
                    <template slot-scope="scope">
                        {{ scope.row.orderStatus | orderStatusToString}}
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-link type="primary">查看订单</el-link>
                        <el-link type="primary">关闭订单</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
        <el-col :span="2"><div class="grid-content "></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="2"><div class="grid-content "></div></el-col>
        <el-col :span="20">
            <el-pagination
                    @size-change="findList"
                    @current-change="findList"
                    :current-page.sync="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size.sync=pagesize
                    layout="total, sizes, prev, pager, next, jumper"
                    :total=total>
            </el-pagination>
        </el-col>
        <el-col :span="2"><div class="grid-content "></div></el-col>
    </el-row>
</div>
</body>
<script>

    Vue.filter("orderStatusToString",function (value) {
        let status = ""
        switch (value) {
            case '0':
                status = "待付款";
                break;
            case '1':
                status = "待发货";
                break;
            case '2':
                status = "已发货";
                break;
            case '3':
                status = "已完成";
                break;
            case '4':
                status = "已关闭";
                break;
        }
        return status;
    })

    new Vue({
        el:"#app",
        data:{
            orderList:[],
            searchForm:{},
            total:0,
            pagesize:20,
            currentPage:1
        },
        created(){
            this.findList()
        },
        methods:{
            findList(){
                axios.post(`/api/order/findpagecondtion.do?startpage=${this.currentPage}&pagesize=${this.pagesize}`,this.searchForm).then((resp)=>{
                    this.orderList = resp.data.records
                    this.total = resp.data.total
                }).catch((err)=>{

                })
            }
        }
    })
</script>
</html>